<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>

    <style>

        p{
            font-size: 30px;

        }


    </style>


</head>
<body>

<!--img标签为行内元素-->
<!--1.src : 资源本地路径获取网络路径-->
<!--2.alt : 替换文本显示,当图片加载不出来的时候,文本替换-->

<h2>加载本地资源图片</h2>
<img src="../image/1.jpg"  alt="xingweixin" style="width: 150px;height: 100px">

<h2>加载远程资源</h2>
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2274909088,1858101302&fm=58&bpow=800&bpoh=933" alt="fengmengyue" width="100ox" height="80px">

<h2>设置边框</h2>
<img src="../image/2.jpeg" alt="加载不出来" border="8">

<h2>设置对齐</h2>

<!--align在html4中已经废弃-->
<!--center不好用/right好用的-->

<div style="background-color: lightyellow;width: 100%;height: 150px" >

    <img src="../image/2.jpeg" alt="加载不出来" border="2" align="right" width="100px" height="100px">


</div>


<h2>排列图片</h2>
<p>图片和文字底部对齐 <img width="100" height="100" src="../image/3.png" align="bottom"> </p>
<p>中部对齐 <img width="100" height="100" src="../image/3.png" align="middle"> </p>
<p>上部对齐 <img width="100" height="100" src="../image/3.png" align="top"> </p>


<h2>浮动图像</h2>
<p>
    <img src="../image/3.png" width="50" height="50" style="float: left"> 图片浮动在文字左边

</p>

<p>
    <img src="../image/3.png" width="50" height="50" style="float:right"> 图片浮动在文字右边

</p>


<h2>创建图片链接</h2>
<p>
    <a href="https://www.baidu.com/" target="_parent"> <img src="../image/3.png" width="50" height="50"> </a>
</p>





</body>
</html>